import React, { useState } from 'react';
import { Button, Form, Input, InputNumber, Radio, Modal,Space,Select  } from 'antd';

import type { FormInstance } from 'antd/es/form';

// 定义检查项数据类型
interface CheckItem {
  name: string;
  abbreviation: string;
  type: string;
  applicability: 'general' | 'male' | 'female';
  minAge: number;
  costPrice: number;
  maxAge: number;
  sellingPrice: number;
  explanation: string;
  referenceValue?: string;
  note: string;
}

const AddCheckItemModal: React.FC<{
  visible: boolean;
  onCancel: () => void;
  onSubmit: (data: CheckItem) => void;
}> = ({ visible, onCancel, onSubmit }) => {
  const [form] = Form.useForm<FormInstance<CheckItem>>();

  // 处理表单提交
  const handleSubmit = () => {
    form.validateFields()
      .then(values => {
        onSubmit(values);
        form.resetFields();
      })
      .catch(info => {
        console.log('Validate Failed:', info);
      });
  };

  return (
    <Modal
      title="添加检查项"
      open={visible}
      onCancel={onCancel}
       centered 
      footer={[
        <Space  key="footer-buttons" 
      style={{ 
        width: '100%', 
        justifyContent: 'center' // Flex 布局居中（推荐，更灵活）
      }}>  <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleSubmit}>
          确认添加
        </Button></Space>
      
      ]}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          applicability: 'general',
          minAge: 0,
          costPrice: 0,
          maxAge: 0,
          sellingPrice: 0,
        }}
      >
        <Form.Item<CheckItem>
          name="name"
          label="名称"
          rules={[{ required: true, message: '请输入检查项名称' }]}
        >
          <Input placeholder="请输入检查项名称" />
        </Form.Item>

        <Form.Item<CheckItem>
          name="abbreviation"
          label="简称"
          rules={[{ required: true, message: '请输入检查项简称' }]}
        >
          <Input placeholder="请输入检查项简称" />
        </Form.Item>

        <Form.Item<CheckItem>
          name="type"
          label="检查项类型"
          rules={[{ required: true, message: '请输入检查项类型' }]}
        >
            <Select placeholder="请选择c">
                    <Select.Option value="1">检查</Select.Option>
                    <Select.Option value="2">检验</Select.Option>
                   
                  </Select>
        </Form.Item>

        <Form.Item<CheckItem>
          name="applicability"
          label="适用性别"
          rules={[{ required: true, message: '请选择适用性别' }]}
        >
          <Radio.Group  buttonStyle="solid">
            <Radio.Button value="general">通用</Radio.Button>
            <Radio.Button value="male">男</Radio.Button>
            <Radio.Button value="female">女</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item<CheckItem>
          name="minAge"
          label="最小年龄"
          rules={[{ required: true, message: '请输入最小年龄' }]}
        >
          <InputNumber
            min={0}
            style={{ width: '100%' }}
            placeholder="请输入最小年龄"
          />
        </Form.Item>
        <Form.Item<CheckItem>
          name="maxAge"
          label="最大年龄"
          rules={[{ required: true, message: '请输入最大年龄' }]}
        >
          <InputNumber
            min={0}
            style={{ width: '100%' }}
            placeholder="请输入最大年龄"
          />
        </Form.Item>

          <Form.Item<CheckItem>
          name="costPrice"
          label="价格"
          rules={[{ required: true, message: '请输入价格' }]}
        >
          <InputNumber
            min={0}
            step={0.01}
            style={{ width: '100%' }}
            placeholder="请输入价格"
          />
        </Form.Item>

        <Form.Item<CheckItem>
          name="referenceValue"
          label="参考值"
           rules={[{ required: true, message: '参考值' }]}
        >
          <Input placeholder="请输入参考值" />
        </Form.Item>

         <Form.Item<CheckItem>
          name="sellingPrice"
          label="注意事项"
          rules={[{ required: true, message: '注意事项' }]}
        >
          <Input placeholder="请输入注意事项" />
        </Form.Item>
          <Form.Item<CheckItem>
          name="sellingPrice"
          label="描述"
          rules={[{ required: true, message: '描述' }]}
        >
          <Input placeholder="请输入描述" />
        </Form.Item>
    <Form.Item<CheckItem>
          name="sellingPrice"
          label="所属分类"
          rules={[{ required: true, message: '所属分类' }]}
        >
          <Input placeholder="请输入所属分类" />
        </Form.Item>

        
      </Form>
     
    </Modal>
  );
};

// 使用示例
const CheckItemManager: React.FC = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleAddCheckItem = (data: CheckItem) => {
  
   
    setModalVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={() => setModalVisible(true)}>
        新增检查项
      </Button>
      <AddCheckItemModal
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        onSubmit={handleAddCheckItem}
      />
    </div>
  );
};


export  {CheckItemManager};